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Abstract: We describe a procedure that utilizes symmetric curves for building artistic tiles. One 
particular curve was found to mesh nicely with hundreds other curves, resulting in eye-catching 
tiling designs. The results of our work serve as a good example of using ideas from 2-D graphics 
and algorithms in a practical web-based application. 
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1. Introduction 

The subject of symmetry has fascinated artists and scientists throughout the history of mankind. The 
surge in electronic and web publishing in recent years has lead to renewed interest in the subject of 
symmetry and its role in tiling and graphics design [1-6]. Though it seems that there is no universally 
accepted definition of symmetry [11], symmetry is often associated with regularity (repetitiveness) 
that is somehow aesthetically pleasing. With geometric objects such as 2-dimensional drawings or 3- 
dimensional physical structures, symmetry is often defined through geometric transformations such as 
scaling, reflection, and rotation [4, 6]. 

A tessellation ( tiling ) of a 2-D plane is a covering of the plane by one or more geometric shapes 
without any gaps or overlaps [6]. Commercial graphics and drawing tools have built-in commands for 
filling and tiling the drawing area with a selected image or bitmap but little in the way of automatically 
creating a symmetric image in the first place. Creating a symmetric design by hand is undeniably a 
tedious process, even for artists. This has driven some researchers to propose and develop graphics 
drawing programs with built-in aids for constructing symmetric drawings [7, 8, 9, 12, 13]. However, 
these systems lack any facilities for automatic construction of such drawings. This has motivated the 
author to develop TilerPro [3]. TilerPro is a web-based system for generating a large variety of 
symmetric curves and their corresponding tiling designs. 

TilerPro uses vector graphics and can save a tiling design to SVG format. Unlike bitmap graphics, 
vector graphics objects have the advantage that they can be scaled without being distorted. SVG 
(Scalable Vector Graphics, http://www.w3.org/Graphics/SVG/ ) has become a popular open-source 
format for storage and exchange of vector graphics. SVG is now supported by almost all commercial 
graphics design software and modem web browsers. 

The tiling designs produced by TilerPro are quite aesthetic. This can be attributed to several factors. 
First, each tile exhibits rotational and reflection symmetries. Second, the curves and filled regions of 
adjacent tiles mesh to exhibit a new pattern that is repeated throughout the tiling. Third, TilerPro uses 
contrasting line and fill colors adding a color-symmetry dimension to the tiling. 

The symmetric curves used in this work are built using extended Sierpinski’s curves [3]. These curves 
are defined by recursive mathematical functions. Recursion is known as an effective algorithm-design 
technique, and its use in the creation of symmetric drawings can serve as a “visual” attraction to lure 
beginning university students into the computer science major. 

2. Regular Tiling with Symmetric Curves 

Consider the curve shown in Figure 1. The curve (image) exhibits a rotational symmetry of order 4 
(i.e., the shape coincides with itself with every 90-degree rotation around its center). It also exhibits 
reflection symmetry; the bottom half is a reflection of the top half, and, at the same time, the left half 
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is a reflection of the right half. Furthermore, the shape is symmetric with respect to both diagonals. 
These characteristics hold for any square around the center of this image (as in the dotted square 
shown in Figure 1). Note that for any curve we use, we fill its closed regions (identified using the 
even-odd rule). 

As can be seen from Figure 1, a regular tiling [6] using this kind of curves will inherit all of the curve 
symmetries. In addition, the tiled area (assumed to be infinite in both the x and y directions) exhibits a 
translation symmetry (x-movement and/or y-movement by the side length). In regular tiling, the 
design starts with a basic square (or a rectangular) shape that represents a single tile, which is then laid 
horizontally and vertically. 




Figure 1. A symmetric curve showing a square tile (with dotted border) and its regular tiling (right 
figure). This is our base curve for the “1000-and-l Curves”. 


More compelling tiling designs can be obtained by overlapping (coinciding the centers of the curves) 
two symmetric curves. Consider, for example, the design shown in Figure 2. This design uses the base 
curve from Figure 1 overlapped with another symmetric curve (again, the tile is a square around the 
center of the image). Figure 4 shows the XML text for this tiling design. (The text can be saved as an 
XML file to be opened and viewed by an SVG reader such as Mozilla FireFox browser.) 

In [3], we have proposed a scheme for building a large variety of symmetric curves to aid in producing 
a vast number of aesthetically-pleasing tiling designs. In particular, we have found that our base curve 
from Figure 1 overlaps nicely with hundreds other curves; hence, we coined the title, “1000-and-l 
Curves ”. These designs exhibit patterns normally found in Islamic ornaments [1] (Figure 4 in [1] 
shows a pattern matching with the tiling designs from our base curve). Figure 3 shows one sample 
tiling design. Many other designs can be browsed at http://faculty.kfupm.edu.sa/ics/darwish/1001Tiles . 
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Figure 2. The base curve overlapped with another symmetric curve and the corresponding regular tiling. 
SVG text for this design is shown Figure 3. 




Figure 3. A sample tiling design from the set 64 1000-and-l Curves”. 
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<?xml version='1.0' standalone='no'?> 

<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN’ 

'http://www.w3.org/Graphics/SVG/1.1/DTD/svgll.dtd' > 

<svg width='100%’ height='100%’ version='1.1' xmlns=’http://www.w3.org/2000/svg' 
xmlns:xlink= 1 http://www.w3.org/1999/xlink’ > 

<defsXpattern id='tile' patternUnits='userSpaceOnUse' viewBox='100 100 120 120' 
x='100' y= 1 100 1 width='120' height=’120' > 

<g><polyline points=' 80,80 80,70 90,130 100,140 110,150 210,150 220,140 230,130 
240,70 240,80 250,80 190,90 180,100 170,110 170,210 180,220 190,230 250,240 

240.240 240,250 230,190 220,180 210,170 110,170 100,180 90,190 80,250 80,240 

70.240 130,230 140,220 150,210 150,110 140,100 130,90 70,80 80,80’ 
style='fill:#FFFD6F;stroke:#066916;stroke-width:1;fill-opacity:0.09375' /> 
<polyline points=' 40,40 65,65 70,70 75,75 80,75 80,75 85,75 90,70 95,65 120,40 
145,65 150,70 155,75 130,100 125,105 120,110 120,115 120,115 120,120 125,125 
130,130 155,155 160,155 160,155 165,155 190,130 195,125 200,120 200,115 200,115 
200,110 195,105 190,100 165,75 170,70 175,65 200,40 225,65 230,70 235,75 240,75 
240,75 245,75 250,70 255,65 280,40 255,65 250,70 245,75 245,80 245,80 245,85 
250,90 255,95 280,120 255,145 250,150 245,155 220,130 215,125 210,120 205,120 

205.120 200,120 195,125 190,130 165,155 165,160 165,160 165,165 190,190 195,195 

200.200 205,200 205,200 210,200 215,195 220,190 245,165 250,170 255,175 280,200 

255,225 250,230 245,235 245,240 245,240 245,245 250,250 255,255 280,280 255,255 

250.250 245,245 240,245 240,245 235,245 230,250 225,255 200,280 175,255 170,250 

165,245 190,220 195,215 200,210 200,205 200,205 200,200 195,195 190,190 165,165 

160,165 160,165 155,165 130,190 125,195 120,200 120,205 120,205 120,210 125,215 

130,220 155,245 150,250 145,255 120,280 95,255 90,250 85,245 80,245 80,245 75,245 

70.250 65,255 40,280 65,255 70,250 75,245 75,240 75,240 75,235 70,230 65,225 

40.200 65,175 70,170 75,165 100,190 105,195 110,200 115,200 115,200 120,200 
125,195 130,190 155,165 155,160 155,160 155,155 130,130 125,125 120,120 115,120 

115.120 110,120 105,125 100,130 75,155 70,150 65,145 40,120 65,95 70,90 75,85 
75,80 75,80 75,75 70,70 65,65 40,40’ style='fill:#FFE34A;stroke:#732706;stroke- 
width :1;fill-opacity:0.9960938' /></g> 

</pattern></defs> 

<g transform='translate(20,20)'Xrect x='100’ y='100' width='360’ height='360' 
style 361 fill: url(#tile); stroke: silver;'/></g> 

</svg> 


Figure 4. SVG text for the design shown in Figure 2. 

Conclusion 

In this paper, we have outlined a procedure for constructing artistic tiles from symmetric curves. In 
addition, we have identified a particular curve (which is often seen in Islamic ornaments) to mesh 
nicely with hundreds other curves, leading to many aesthetic tiling designs. 

The tiling designs presented in this paper are built using TilerPro. TilerPro is a web-based system to 
facilitate the construction of sophisticated tiling designs. The software is currently freely available at 
http://tilerpro.com/freeshow . For computer science students, TilerPro serves as a “model” for a web- 
based application that combines concepts of recursive algorithms and 2-D graphics. 

This work has a companion website currently available at: 
http://facultv.kfupm.edu.sa/ics/darwish/1001Tiles . 
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